<template>
  <a-modal
    title="指导老师指派"
    :width="800"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-transfer
        :rowKey="record => record.userId.toString()"
        :data-source="expertList"
        show-search
        :filter-option="filterOption"
        :list-style="{
          width: '350px',
          height: '500px',
        }"
        :titles="['未指派', '已指派']"
        :target-keys="expert"
        :render="renderItem"
        @change="handleChange"
      />
    </a-spin>
  </a-modal>
</template>

<script>
import { assignQuota, getQuotaDetail } from '@/api/category'
import { getSystemUser } from '@/api/consumer'
export default {
  components: {
  },
  props: {
  },
  data () {
    return {
      visible: false,
      model: null,
      loading: false,
      expert: [],
      expertList: []
    }
  },
  created () {
  },
  deactivated () {
    this.visible = false
  },
  methods: {
    assignView (record) {
      this.visible = true
      this.model = record
      if (record.length === 1) {
        this.getDetail(record[0])
      }
      this.getUserPage()
    },
    getDetail (id) {
      this.loading = true
      getQuotaDetail({
        id
      }).then(res => {
        const expert = []
        res.targetManagementExperts?.forEach(item => {
          if (item.type === 3) {
            expert.push(item.userId.toString())
          }
        })
        this.expert = expert
      }).finally(() => {
      this.loading = false
      })
    },
    getUserPage () {
      getSystemUser({
        current: 1,
        size: 1000,
        roleKeys: 'GUIDANCE_EXPERT'
      })
      .then(res => {
        this.expertList = res.records
      })
    },
    renderItem (item) {
      const customLabel = (
        <span>
          {item.nickName} - {item.phonenumber}
        </span>
      )

      return {
        label: customLabel, // for displayed item
        value: item.nickName // for title and filter matching
      }
    },
    filterOption (inputValue, option) {
      return option.nickName.indexOf(inputValue) > -1
    },
    handleChange (nextTargetKeys) {
      this.expert = nextTargetKeys
    },
    handleOk () {
      const values = {
        targetManagementIds: this.model,
        expertUserIds: this.expert
      }
      console.log(values)
      if (values.expertUserIds.length === 0) {
        this.$message.warning('请分配指导老师')
        return
      }
      assignQuota(values).then(res => {
        this.visible = false
        this.expert = []
        this.$message.success('指导老师分配成功')
      })
    },
    handleCancel () {
      this.visible = false
      this.expert = []
    }
  }
}
</script>
